<template>
  <view class="order-page">
    <nav-tab
      v-model="current"
      :items="navList"
      id="orderNav"
      has-menu-button-top
      border
    />

    <scroll-view
      class="order-list"
      :style="{ height: scrollHeight + 'px' }"
      scroll-y
    >
      <order-list
        :orders="filteredOrders"
      />
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from "vuex"
import OrderList from "./components/OrderList/OrderList.vue"
export default {
  name: "order",
  components: {
    OrderList
  },
  data() {
    return {
      current: 0,
      navList: ["全部", "历史", "退单"],
      scrollHeight: 0,
      menuButtonTop: this.$menuButtonTop
    }
  },
  onReady() {
    const query = uni.createSelectorQuery().in(this)
    query.select("#orderNav").boundingClientRect()
    query.exec(res => {
      this.scrollHeight = uni.getSystemInfoSync().windowHeight - res[0].height
    })
  },
  computed: {
    ...mapState("order", ["orders"]),
    filteredOrders() {
      if (!Array.isArray(this.orders)) return []
      if (this.current === 1) {
        return this.orders.filter(
          o => o.orderStatus === 4
        )
      }
      if (this.current === 2) {
        return this.orders.filter(o => o.isRefund === 1)
      }
      return this.orders
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.order-page {
  width: 100%;
  height: 100%;
}
</style>
